<template>
  <div class="app-container">
    <!-- 顶部选择和操作按钮 -->
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="断面：">
            <el-select v-model="formInline.monitorPoint" placeholder="请选择监测点">
              <el-option label="利民河殷庄闸" value="liMinHeYinZhuangZha"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间：">
            <el-date-picker 
              v-model="formInline.date" 
              type="date" 
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <!-- 表格展示监测数据 -->
        <div class="table-container">
          <div class="table-header">
            <h3>{{ formInline.date }}监测数据日报表</h3>
          </div>
          <el-table 
            :data="tableListData" 
            style="width: 100%" 
            border 
            :span-method="objectSpanMethod"
            :header-cell-style="{background:'#f5f7fa',color:'#303133'}"
            :cell-style="{padding:'10px 0'}"
          >
            <el-table-column v-for="column in tableOp" :key="column.prop" :prop="column.prop" :label="column.label" align="center">
              <template #default="{ row, $index }">
                <!-- 高亮显示异常值 -->
                <span v-if="isAbnormalValue(row[column.prop], column.prop)" style="color: red;">{{ row[column.prop] }}</span>
                <span v-else>{{ row[column.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        monitorPoint: 'liMinHeYinZhuangZha',
        date: '2025-05-18'
      },
      tableOp: [
        { prop: 'time', label: '时间' },
        { prop: 'waterTemperature', label: '水温(℃)' },
        { prop: 'pH', label: 'pH(无量纲)' },
        { prop: 'dissolvedOxygen', label: '溶解氧(mg/L)' },
        { prop: 'electricalConductivity', label: '电导率(μS/cm)' },
        { prop: 'turbidity', label: '浑浊度(NTU)' },
        { prop: 'chemicalOxygenDemand', label: '化学需氧量(mg/L)' },
        { prop: 'highManganeseIndex', label: '高锰酸盐指数(mg/L)' },
        { prop: 'ammoniaNitrogen', label: '氨氮(mg/L)' },
        { prop: 'totalPhosphorus', label: '总磷(mg/L)' },
        { prop: 'totalPhosphorus', label: '总氮(mg/L)' }
      ],
      tableData: [
        { time: '2025-05-18 06:00', waterTemperature: '26.0', pH: '8.51', dissolvedOxygen: '3.37', electricalConductivity: '1788.7', turbidity: '64.9', chemicalOxygenDemand: '', highManganeseIndex: '', ammoniaNitrogen: '', totalPhosphorus: '' },
        { time: '2025-05-18 07:00', waterTemperature: '25.9', pH: '8.51', dissolvedOxygen: '3.63', electricalConductivity: '1790.0', turbidity: '67.3', chemicalOxygenDemand: '', highManganeseIndex: '', ammoniaNitrogen: '', totalPhosphorus: '' },
        { time: '2025-05-18 08:00', waterTemperature: '25.9', pH: '8.51', dissolvedOxygen: '5.19', electricalConductivity: '1790.2', turbidity: '81.8', chemicalOxygenDemand: '', highManganeseIndex: '6.5', ammoniaNitrogen: '0.125', totalPhosphorus: '0.171' },
        { time: '2025-05-18 09:00', waterTemperature: '26.0', pH: '8.50', dissolvedOxygen: '4.61', electricalConductivity: '1789.5', turbidity: '65.2', chemicalOxygenDemand: '', highManganeseIndex: '', ammoniaNitrogen: '', totalPhosphorus: '' },
        { time: '2025-05-18 10:00', waterTemperature: '26.0', pH: '8.51', dissolvedOxygen: '3.95', electricalConductivity: '1788.6', turbidity: '65.5', chemicalOxygenDemand: '', highManganeseIndex: '', ammoniaNitrogen: '', totalPhosphorus: '' },
        { time: '2025-05-18 11:00', waterTemperature: '26.2', pH: '8.51', dissolvedOxygen: '4.49', electricalConductivity: '1791.0', turbidity: '61.6', chemicalOxygenDemand: '', highManganeseIndex: '', ammoniaNitrogen: '', totalPhosphorus: '' },
        { time: '2025-05-18 12:00', waterTemperature: '26.4', pH: '8.51', dissolvedOxygen: '6.63', electricalConductivity: '1792.7', turbidity: '72.5', chemicalOxygenDemand: '', highManganeseIndex: '7.2', ammoniaNitrogen: '0.092', totalPhosphorus: '0.184' },
        { time: '2025-05-18 13:00', waterTemperature: '26.5', pH: '8.50', dissolvedOxygen: '6.14', electricalConductivity: '1793.8', turbidity: '61.6', chemicalOxygenDemand: '', highManganeseIndex: '', ammoniaNitrogen: '', totalPhosphorus: '' },
        { time: '2025-05-18 16:00', waterTemperature: '26.9', pH: '8.49', dissolvedOxygen: '7.78', electricalConductivity: '1793.8', turbidity: '50.7', chemicalOxygenDemand: '', highManganeseIndex: '6.8', ammoniaNitrogen: '0.100', totalPhosphorus: '' },
        { time: '2025-05-18 17:00', waterTemperature: '26.3', pH: '8.50', dissolvedOxygen: '4.61', electricalConductivity: '1790.5', turbidity: '58.4', chemicalOxygenDemand: '', highManganeseIndex: '', ammoniaNitrogen: '', totalPhosphorus: '' },
        { time: '2025-05-18 20:00', waterTemperature: '26.2', pH: '8.50', dissolvedOxygen: '4.63', electricalConductivity: '1793.9', turbidity: '59.7', chemicalOxygenDemand: '', highManganeseIndex: '6.3', ammoniaNitrogen: '0.151', totalPhosphorus: '' },
        { time: '2025-05-18 21:00', waterTemperature: '26.2', pH: '8.50', dissolvedOxygen: '4.63', electricalConductivity: '1793.9', turbidity: '59.7', chemicalOxygenDemand: '', highManganeseIndex: '', ammoniaNitrogen: '', totalPhosphorus: '' }
      ]
    };
  },
  computed: {
    tableListData() {
      // 处理原始数据并添加统计行
      let arr = [];
      for(let i=1;i<this.tableOp.length;i++) {
        let key = this.tableOp[i].prop;
        let value = this.tableData.map(item => item[key]);
        arr.push({key,value});
      };
      
      let addRow = [];
      let row1 = {time:"最大值"}
      let row2 = {time:"最小值"}
      let row3 = {time:"均值"}
      let row4 = {time:"各项水质"};
      let row5 = {time:"整体水质",highManganeseIndex:'IV类'}
      let row6 = {time:"超标项",highManganeseIndex:'溶解氧,高锰酸盐指数'}
      
      for(let item of arr){
        // 最大值
        row1[item.key] = Math.max(...item.value)
        // 最小值
        row2[item.key] = Math.min(...item.value)
        // 平均值
        row3[item.key] = ((item.value.reduce((a,b) => Number(a)+Number(b),0))/item.value.length).toFixed(2)
        // 各项水质
        row4[item.key] = "I类"
      }
      
      addRow.push(row1);
      addRow.push(row2);
      addRow.push(row3);
      addRow.push(row4);
      addRow.push(row5);
      addRow.push(row6);
      console.log([...this.tableData, ...addRow]);
      
      return [...this.tableData, ...addRow]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if(rowIndex >= this.tableListData.length -2) {
        if(columnIndex == 1){
          return [1, 10]
        }
        if(columnIndex > 1){
          return [0, 0]
        }
      }
    },
    onSubmit() {
      console.log('submit!');
    },
    isAbnormalValue(value, prop) {
      // 定义异常值判断规则
      if (!value || value === '') return false;
      
      const numValue = parseFloat(value);
      if (isNaN(numValue)) return false;
      
      // 根据不同参数设置异常阈值
      switch(prop) {
        case 'dissolvedOxygen':
          return numValue < 5; // 溶解氧低于5mg/L为异常
        case 'highManganeseIndex':
          return numValue > 6; // 高锰酸盐指数高于6mg/L为异常
        case 'ammoniaNitrogen':
          return numValue > 0.15; // 氨氮高于0.15mg/L为异常
        default:
          return false;
      }
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.table-header {
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
}

.table-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.ai-performance {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  margin-top: 20px;
}

.ai-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.ai-icon {
  width: 40px;
  height: 40px;
  background-color: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ai-label {
  font-size: 14px;
  color: white;
  font-weight: bold;
}

.performance-meter {
  width: 100%;
  text-align: center;
}

.meter-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.meter-bar {
  height: 8px;
  background-color: #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.bar-fill {
  height: 100%;
  background-color: #409eff;
  transition: width 0.3s ease;
}

.meter-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  color: #666;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.arrow-up {
  color: #409eff;
}

.arrow-down {
  color: #f56c6c;
}

.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-table th {
  font-weight: 500;
  color: #303133;
}
</style>